<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        table,tr,td {
            border: 1px solid #000;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <tr>
                <td>欢迎光临 vue开发的收银系统 水果店</td>
            </tr>
            <tr><td>苹果 {{apple.price}} ￥/斤,折扣{{apple.discount * 10}}折</td></tr>
            <tr>
                <td>请输入你要购买的斤数<input type="text" v-model.number="apple.count"></td>
            </tr>
            <tr>
                <td><button @click="buy">结账买单~</button></td>
            </tr>
            <tr>
                <td>结账单: 总价: {{oldPrice}} ¥元 折后价: {{newPrice}} ¥元 省了:{{oldPrice - newPrice}} ¥元</td>
            </tr>
        </table>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                apple:{
                    price:10,
                    discount:0.8,
                    count:''
                },
                oldPrice:0,
                newPrice:0
            },
            methods:{
                buy() {
                 this.oldPrice = this.apple.price * this.apple.count
                 this.newPrice = this.oldPrice * this.apple.discount   
                }
            }
        })
    </script>
</body>
</html>